<div>
   <div class="mat-elevation-z4 pagedescription">
    This page shows MFA information for all users. The accuracy of this data depends on whether collection was done with a privileged account (Security/Global Reader/Admin) and whether the --mfa flag was specified during data gathering. MFA can be enforced per user or based on conditions via Conditional Access. Per-user MFA can be inferred from the Application Roles page when data collection was done with a limited user, it will only show up as enabled/enforced in this view when collecting data as admin. Whether a FIDO key is added to an account can also be collected using any user account.
  </div>
  <mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
  </mat-form-field>
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    <ng-container matColumnDef="displayName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row"><a [routerLink]="['/users/', row.objectId]">{{row.displayName}}</a></td>
    </ng-container>

    <ng-container matColumnDef="userPrincipalName">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>UserPrincipalName</th>
      <td mat-cell *matCellDef="let row">{{row.userPrincipalName}}</td>
    </ng-container>

    <ng-container matColumnDef="accountEnabled">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Enabled</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.accountEnabled" aria-hidden="false" aria-label="Enabled">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="perusermfa">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Per-user MFA</th>
      <td mat-cell *matCellDef="let row">{{row.perusermfa}}</td>
    </ng-container>

    <ng-container matColumnDef="has_app">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Authenticator app</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.has_app" aria-hidden="false" aria-label="Enabled">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="has_phonenr">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Phone number</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.has_phonenr" aria-hidden="false" aria-label="Enabled">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="has_fido">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>FIDO</th>
      <td mat-cell *matCellDef="let row"><mat-icon *ngIf="row.has_fido" aria-hidden="false" aria-label="Enabled">check</mat-icon></td>
    </ng-container>

    <ng-container matColumnDef="mfamethods">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Registered MFA Methods</th>
      <td mat-cell *matCellDef="let row"><span *ngIf="row.mfamethods > 0">{{row.mfamethods}}</span><span *ngIf="row.mfamethods == 0">None</span></td>
    </ng-container>

    <ng-container matColumnDef="strongAuthenticationDetail">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Methods</th>
      <td mat-cell *matCellDef="let row">
        <span *ngFor="let method of row.strongAuthenticationDetail.methods">
          <mat-icon *ngIf="method.methodType == 'PhoneAppOTP'" aria-label="App with OTP" [class.active]="method.isDefault" matTooltip="App with OTP" >phonelink_lock</mat-icon>
          <mat-icon *ngIf="method.methodType == 'PhoneAppNotification'" aria-label="Phone notification" [class.active]="method.isDefault" matTooltip="App with notification" >notifications_active</mat-icon>
          <mat-icon *ngIf="method.methodType == 'OneWaySms'" aria-label="Text message (SMS)" [class.active]="method.isDefault" matTooltip="Text message (SMS)" >sms</mat-icon>
          <mat-icon *ngIf="method.methodType == 'TwoWayVoiceMobile'" aria-label="Phone call" [class.active]="method.isDefault" matTooltip="Phone call" >phone_callback</mat-icon>
        </span>
        <span *ngFor="let sdk of row.searchableDeviceKey">
          <mat-icon *ngIf="sdk.usage == 'NGC'" aria-label="Windows Hello" matTooltip="Windows Hello for Business" >passkey</mat-icon>
          <mat-icon *ngIf="sdk.usage == 'FIDO'" aria-label="FIDO2 key / passkey" matTooltip="FIDO 2 key or passkey" >passkey</mat-icon>
        </span>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSizeOptions]="[50, 100, 500, 1000, 5000]"></mat-paginator>
</div>
<router-outlet></router-outlet>
